<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" id="a">
    <span id="b"></span>
  </div>
 
</body>
<script>
  var  dom = create(document.getElementById('app'))
  console.log(dom)
  function create(vn) {
    let  vnode = document.createDocumentFragment()
    let child
    while (child = vn.firstChild) {
      vnode.append(child)
    }
    return vnode
  }
  document.getElementById('app').appendChild(dom)

  function compile(node, vm){
    var reg = /\{\{(.*)\}\}/;
    if(node.nodeType === 1) {
      var attr  = Node.attributes;
      // 解析属性
      for(let i = 0; i < arrt.length ; i++) {
        let name = attr[i].nodeValue // 获取v-model绑定的属性名
        node.value = vm.data[name]
        node.removeAttribute('v-model')
      }
    }
    if (node.nodeType === 3) {// 节点为text
      if(reg.test(node.nodeValue)){
        var name = RegExp.$1; // 获取匹配字符串
        name = name.trim();
        node.nodeValue = vm.data[name]

      }
    }
  }


</script>
</html>